<template>
  <div py-82 text-center class="bg-#F8F9FA">
    <h1 text-40>联系<span class="text-#448BF5">支持</span></h1>
    <div class="text-#5F6368 mt-20 text-18 mb-50">
      如果您在文档中没有找到答案，我们的支持团队随时为您提供帮助
    </div>
    <div flex justify-center gap-40>
      <div v-for="(i, idx) in list" :key="idx" class="item" w-350 pt-40 px-52 pb-40>
        <div class="img-wrap" w-80 h-80 flex items-center justify-center m-auto>
          <img :src="i.img" alt="" w-40 h-40 object-contain />
        </div>
        <h2 pt-25 pb-14 text-24>{{ i.title }}</h2>
        <div text-16 class="text-#5F6368 line-height-24">{{ i.desc }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
// import docs from '@/assets/image/docs.png'
import phone from '@/assets/image/phone.png'
import service from '@/assets/image/service.png'
import mail from '@/assets/image/mail.png'
import { useStore } from '@/stores/index'
const store = useStore()

const contactInfo = computed<any>(() => {
  return store.contactInfo
})

const list = computed(()=> [
  {
    img: service,
    title: '在线客服',
    desc: `我们的在线客服团队在工作日${contactInfo.value?.workTime}为您提供实时支持`
  },
  {
    img: mail,
    title: '邮件支持',
    desc: `发送邮件至 ${contactInfo.value?.emails?.map(e => e.email).join('；')}，我们将在24小时内回复`
  },
  {
    img: phone,
    title: '电话支持',
    desc: `拨打客服热线 ${contactInfo.value?.contactPhone}，${contactInfo.value?.workTime}`
  }
])
</script>

<style scoped lang="scss">
.item {
  border-radius: 15px;
  background: #ffffff;
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.08);
  .img-wrap {
    border-radius: 50%;
    background: rgba(68, 139, 245, 0.1);
  }
}
</style>
